<template>
    <div class="mall-portal">
        <div class="mall-layout mall-layout-base">
            <div class="mall-layout-header">
                <div class="mall-layout-header-container">
                    <div class="mall-layout-logo-header">
                        <div style="gap: 8px;" class="ant-space ant-space-horizontal ant-space-align-center mall-layout-logo-header-left">
                            <div class="ant-space-item">
                                <img class="mall-layout-logo-header-logo" src="https://static.xyb2b.com/images/9dca2df8b21e0feba9fd1ada99e8f3c9.png" alt="">
                                
                            </div>
                            <span class="ant-space-item-split">
                                <div class="ant-divider ant-divider-vertical"></div>
                            </span>
                            <div class="ant-space-item">
                                <div class="mall-layout-logo-header-title">
                                    <div class="header-title">帮助中心</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mall-layout-main">
                <div class="helpCenter_help-center-page__qLtu9">
                    <div class="helpCenter_help-center-content__I34Bt">
                        <div class="helpCenter_menu-list__lDcv-">
                            <ul>
                                <li :class="id == 18?'helpCenter_selected-li__mQWMI':''" @click="changId('18')">行云特色
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                                <li :class="id == 19?'helpCenter_selected-li__mQWMI':''" @click="changId('19')">新手入门
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                                <li :class="id == 20?'helpCenter_selected-li__mQWMI':''" @click="changId('20')">支付配送
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                                <li :class="id == 21?'helpCenter_selected-li__mQWMI':''" @click="changId('21')">售后保障
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                                <li :class="id == 22?'helpCenter_selected-li__mQWMI':''" @click="changId('22')">加入我们
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                                <li :class="id == 641?'helpCenter_selected-li__mQWMI':''" @click="changId('641')">规则中心
                                    <img class="helpCenter_right-icon__RhPv" src="https://static.xyb2b.com/images/5844c2f13f8e9075ac71e3aa646a4124.png" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 18">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>行云特色</el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="text !=''">{{text}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1">
                                <li>
                                    <a href="" @click="goNext('FAQ')">FAQ</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('免责申明')">免责申明</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('保税商品')">保税商品</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('供应链服务')">供应链服务</a>
                                </li>
                            </ul>
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 19">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item><span @click="ulshowBtn">新手入门</span></el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="text !=''">{{text}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1" v-if="!ulshow">
                                <li>
                                    <a @click="goNext('注册和登录')">注册和登录</a>
                                </li>
                                <li>
                                    <a href="" @click="goNext('新手合作指南')">新手合作指南</a>
                                </li>
                            </ul>
                            <div class="helpCenter_menu-children-wrap__ID9Y1" v-if="ulshow">
                                <div class="rich-text-component">123</div>
                            </div>
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 20">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>支付配送</el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="text !=''">{{text}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1">
                                <li>
                                    <a href=""  @click="goNext('物流配送')">物流配送</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('货物价格')">货物价格</a>
                                </li>
                            </ul>
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 21">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>售后保障</el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="text !=''">{{text}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1">
                                <li>
                                    <a href=""  @click="goNext('身份证报关')">身份证报关</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('关税法规')">关税法规</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('行云货仓平台退换货规则')">行云货仓平台退换货规则</a>
                                </li>
                            </ul>
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 22">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>加入我们</el-breadcrumb-item>
                                    <el-breadcrumb-item v-if="text !=''">{{text}}</el-breadcrumb-item>
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1">
                                <li>
                                    <a href="" @click="goNext('联系我们')">联系我们</a>
                                </li>
                                <li>
                                    <a href="" @click="goNext('营业执照')">营业执照</a>
                                </li>
                            </ul>
                            
                        </div>
                        <div class="helpCenter_menu-children-list__-6gTD" v-if="id == 641">
                            <p class="helpCenter_title__3sg9G">
                                <el-breadcrumb separator="/">
                                    <el-breadcrumb-item>规则中心</el-breadcrumb-item>
                                    <!-- <el-breadcrumb-item>活动管理</el-breadcrumb-item> -->
                                </el-breadcrumb>
                            </p>
                            <ul class="helpCenter_menu-children-wrap__ID9Y1">
                                <li>
                                    <a href=""  @click="goNext('行云货仓平台服务协议')">行云货仓平台服务协议</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('行云货仓平台隐私条款')">行云货仓平台隐私条款</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('云麓好店用户开店服务协议')">云麓好店用户开店服务协议</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('云麓好店隐私政策')">云麓好店隐私政策</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('行云货仓-拼采活动协议')">行云货仓-拼采活动协议</a>
                                </li>
                                <li>
                                    <a href=""  @click="goNext('第三方SDK清单')">第三方SDK清单</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id: 18,
                articleId: 484,
                text: '',
                ulshow: false
            }
        },
        methods: {
            changId(id) {
                this.id = id
                this.text = ''
            },
            goNext(val) {
                this.text = val
                this.ulshow = true
            },
            ulshowBtn() {
                this.ulshow = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    .mall-portal {
        background-color: #fff;
    }
    
    .mall-layout {
        position: relative;
        width: 100%;
    }
    
    .mall-layout-base {}
    
    .mall-layout-header {
        position: relative;
        width: 100%;
        background: #fff;
        -webkit-box-shadow: 0 8px 12px rgba(29, 36, 70, 0.04);
        box-shadow: 0 8px 12px rgba(29, 36, 70, 0.04);
    }
    
    .mall-layout-header-container {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        width: 1280px !important;
        margin: 0 auto;
        height: 92px;
    }
    
    .mall-layout-logo-header {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
    }
    
    .mall-layout-logo-header-left {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .ant-space-item {}
    
    .mall-layout-logo-header-logo {
        width: 71px !important;
        height: auto;
        cursor: pointer;
    }
    
    .ant-divider {}
    
    .ant-divider-vertical {
        border-left: 1px solid #cbcbcb !important;
        position: relative;
        top: -0.06em;
        display: inline-block;
        height: 0.9em;
        margin: 0 8px;
        vertical-align: middle;
        border-top: 0;
    }
    
    .mall-layout-logo-header-title {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        color: #333;
        font-weight: 500;
        font-size: 18px;
    }
    
    .header-title {
        color: #333;
        font-weight: 500;
        font-size: 14px;
    }
    
    .mall-layout-main {
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        padding-top: 24px;
        background-color: #fff !important;
    }
    
    .helpCenter_help-center-page__qLtu9 {
        margin-top: 12px;
    }
    
    .helpCenter_help-center-content__I34Bt {
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 1280px;
        min-height: 1000px;
        margin: 0 auto;
        background-color: #fff;
    }
    
    .helpCenter_menu-list__lDcv- {
        width: 180px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 8px;
        padding: 10px;
        border: 1px solid #DCDEE0;
    }
    
    .helpCenter_selected-li__mQWMI {
        color: var(--antd-wave-shadow-color);
        background-color: #F1F9FC;
        border-radius: 4px;
    }
    
    .helpCenter_help-center-content__I34Bt .helpCenter_menu-list__lDcv- li {
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 40px;
        margin-bottom: 15px;
        padding: 0 10px 0 15px;
        font-weight: 600;
        color: #333;
        font-size: 14px;
        cursor: pointer;
    }
    
    .helpCenter_right-icon__RhPv {
        width: 8px;
        height: 8px;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transition: all 0.2s ease 0s;
        transition: all 0.2s ease 0s;
    }
    
    ul {
        list-style: none;
    }
    
    * {
        margin: 0;
        box-sizing: border-box;
    }
    
    .helpCenter_menu-children-list__-6gTD {
        flex: 1 1;
        padding: 20px 30px;
    }
    
    .helpCenter_title__3sg9G {
        padding-bottom: 20px;
        color: #999;
        font-size: 12px;
        border-bottom: 1px solid #eee;
    }
    
    /deep/.el-breadcrumb__inner {
        cursor: pointer;
        color: #999;
    }
    
    /deep/.el-breadcrumb__item:last-child .el-breadcrumb__inner {
        color: #999;
    }
    
    .helpCenter_menu-children-wrap__ID9Y1 {}
    
    .helpCenter_menu-children-wrap__ID9Y1 li {
        padding: 15px 0;
        color: #333;
        font-size: 14px;
    }
    
    .helpCenter_menu-children-wrap__ID9Y1 {
        margin-top: 18px;
    }
    
    .rich-text-component {
        box-sizing: border-box;
        width: 1000px;
        max-width: 100%;
        min-height: 100%;
        margin: 25px auto 0;
        padding: 0 20px;
        overflow: hidden;
        background-color: #fff;
        border-right: solid 1px #eee;
        border-left: solid 1px #eee;
    }
</style>